<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="app">
		<div v-if="flag=='刘德华'">刘德华</div>
		<div v-else-if="flag=='周杰伦'">周杰伦</div>
		<div v-else>易烊千玺</div>
		
		<div v-show="bool">我的意大利炮</div>
		<!-- v-show 只有两种状态，显示或者隐藏
			对于不需要显示的元素也会渲染，只不过渲染之后隐藏了
		 -->
		<!-- v-if通过嵌套可以有多种状态
			对于不需要渲染的元素，压根不渲染
		 -->
		 
		 <ul>
			 <!-- 数组循环 -->
		 	<li v-for="item in arr">{{item}}</li>
			<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
			<!-- :key保证数组元素的唯一性
				值不能重复，
				值不能自动发生变化
			 -->
		 
		 </ul>
	</div>
	
	<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/demo3.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>